$(function () {
    // 参数设为全局对象，因为将来筛选和分页都要用
    let q = {
        pagenum: 1,
        pagesize: 3,
        cate_id: "",
        state: "",
    }
    // 需求1：初始化文章列表-封装成函数，将来复用
    initArticleList(); //调用初始化文章列表
    let layer = layui.layer
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            //GET类型用params，POST类型用data属性;
            params: q
        }).then(res => {
            // console.log(res.data.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button data-id="${ele.Id}" type="button" class="del-btn layui-btn  layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            });
            //循环结束后，赋值
            $('tbody').empty().html(arr.join(''));
            // 分页
            renderPage(res.data.total)
        })
    };

    //需求2：渲染筛选中的文章类别列表
    let form = layui.form;
    initArtCateList();//函数不调用不执行
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates',

        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功 渲染
            let arr = ['<option value="">请选择文章所属分类</option>'];
            res.data.data.forEach(ele => {
                arr.push(` 
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });
            //循环结束赋值
            let str = arr.join('');
            $('[name=cate_id]').empty().html(str)
            //form.render();可以渲染layui中的 标签select/checkbox/radio,因为这三个标签的样式很难去除
            form.render();
            //根据select标签生成dd
        });

    }



    //需求3：完成筛选功能
    $('#searchForm').on('submit', function (e) {
        e.preventDefault();
        // 根据参数重新渲染文章列表
        //cate_id和state的值修改，根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val()
        // 重新渲染 文章列表
        initArticleList();
    });
    $('#searchForm').on('reset', function () {
        q.cate_id = '';
        q.state = '';
        initArticleList();
    })

    //需求4：分页

    function renderPage(total) {
        let laypage = layui.laypage;
        laypage.render({
            elem: 'pageBox',  //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            //    limit是每页显示的条数
            limit: q.pagesize,//每页显示多少条
            //curr控制当前页面
            curr: q.pagenum, //第几页
            //显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //      obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr);//得到当前页，以便向服务端请求对应页的数据
                // console.log(obj.limit);  //得到每页显示的条数
                if (!first) {
                    //把当前页改变，重新渲染文章列表
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initArticleList();
                }
            }
        });
    }


    //需求5：删除
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id');
        //询问框
        layer.confirm('is not?', { icon: 3, title: '提示' }, function (index) {
            //do something
            //发送ajax删除文章
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then(res => {
                // console.log(res.data.data);
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message);
                }
                //成功提示

                layer.msg('恭喜您，删除文章成功！');
                //bug解决:再次刷新页面之前，判断逻辑page
                //发送ajax，删除文章成功，前端依旧有着条数据，需要用新数据覆盖
                //页面中只有一个元素了，而我收到了一个删除成功的响应。。。
                /*   if ($('.btn-del').length == 1 && q.pagenum > 1) {
                      q.pagenum--;
                  } */
                // 优化方案
                $('.del-btn').length == 1 && q.pagenum > 1 && q.pagenum--
                // 刷新页面
                initArticleList();
            })
            layer.close(index);

        });

    })
})